<template>
  <div style="padding-top:20px">
    <el-row type="flex" class="row-bg" justify="space-around">
      <el-col :span='12'>
        <el-container>
          <el-header style="background-color:rgb(144,157,162);" height="20">
            <h1>待办事项</h1>
          </el-header>
          <el-main>
            <el-input placeholder="回车添加待办事项" class="todoinput" @keyup.enter.native="add" v-model="newtodo.todoContent"></el-input>
            <p>进行中：{{ todolist.length }} 已完成：{{ donenum }}</p>
            <el-row v-bind:key="index" v-for="(item, index) in todolist" class="list-row">
              <el-col :xs="2" :sm="1" :md="1" :lg="1" :xl="1" class="check" :class="{ red: !todolist[index].done, 'green': todolist[index].done }">
                <el-checkbox @change="done(index)" size="mini" v-model="item.done"></el-checkbox>
              </el-col>
              <el-col :xs="19" :sm="21" :md="21" :lg="21" :xl="21" :offset="1">
                <input type="text" v-model="item.todoContent" class="ipcont" :class="{done: todolist[index].done}">
              </el-col>
              <el-col :xs="2" :sm="1" :md="1" :lg="1" :xl="1" class="close">
                <i class="el-icon-close" @click="del(index)"></i>
              </el-col>
            </el-row>
          </el-main>
        </el-container>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getListByCode, delTodo, addTodo, updateTodo } from '../../api/todo'
import { mapState } from 'vuex'

export default {
  data () {
    return {
      newtodo: {
        todoContent: '',
        done: false
      },
      todolist: []
    }
  },
  methods: {
    add: function () {
      if (this.newtodo.todoContent) {
        addTodo({
          drCode: this.user.user.drCode,
          todoContent: this.newtodo.todoContent
        }).then(res => {
          this.reload()
          this.newtodo = { todoContent: '', done: false }
        })
      }
    },
    del: function (index) {
      // this.todolist.splice(index, 1)
      delTodo(this.todolist[index].todoId).then(res => {
        this.reload()
      })
    },
    done: function (index) {
      var todo = this.todolist[index]
      updateTodo({
        todoId: todo.todoId,
        todoState: todo.done ? 'Y' : 'N'
      }).then(res => {
        this.reload()
      })
    },
    reload: function () {
      var that = this
      getListByCode(this.user.user.drCode).then(res => {
        res.forEach(element => {
          element.done = element.todoState === 'Y'
        })
        that.todolist = res
      })
    }
  },
  computed: {
    donenum: function () {
      return this.todolist.filter(function (val) { return val.done }).length
    },
    ...mapState(['user'])
  },
  mounted () {
    this.reload()
  }
}
</script>

<style>
    .el-header {
      text-align: center;
    }

    .todoinput {
      margin-bottom: 40px;
    }

    .list-row {
      height: 40px;
      background-color: #fbfbfb;
      margin-bottom: 5px;
    }

    .check {
      text-align: center;
      line-height: 40px;
    }

    .red {
      border-left: #ef5f65 2px solid;
    }

    .green {
      border-left: #B9E1DC 2px solid;
    }

    .ipcont {
      width: 90%;
      margin-top: 8px;
      border: 0;
      line-height: 24px;
      background-color: transparent;
      font-size: 16px;
      color: #756C83;
    }

    .close {
      text-align: center;
      line-height: 40px;
    }

    .el-icon-close {
      cursor: pointer;
    }

    .el-icon-close:hover {
      color: #ef5f65;
    }

    .done {
      text-decoration: line-through;
    }
  </style>
